<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动监听</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="jquery-3.2.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-default" role="navigation" id="navbar-example">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">W3Cschool</a>
        </div>
        <div class="bs-js-navbar-scrollspy">
            <ul class="nav navbar-nav">
                <li ><a href="#ios">iOS</a></li>
                <li><a href="#android">Android</a></li>
                <li><a href="#java">Java</a></li>
            </ul>
        </div>
    </nav>

    <div data-spy="scroll" data-target="#navbar-example"  style="height: 200px;overflow: auto;position: relative;">
        <div class="section">
            <h4 id="ios">iOS</h4>
            <p>iOS是由苹果公司开发的移动操作系统.苹果公司最早于2007年1月9日的Macworld大会上公布这个系统,最初是设计给iPhone使用的,
                后来陆续套用到iPod touch、iPad以及Apple TV等产品上.iOS与苹果的Mac OS X操作系统一样,它也是以Darwin为基础的,
                因此同样属于类Unix的商业操作系统.原本这个系统名为iPhone OS,因为iPad,iPhone,iPod touch都使用iPhone OS,所以2010WWDC大会上宣布改名为iOS</p>
        </div>


        <div class="section">
            <h4 id="android">Android</h4>
            <p>Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，
                由Google公司和开放手机联盟领导及开发。尚未有统一中文名称，
                中国大陆地区较多人使用“安卓”或“安致”Android操作系统最初由Andy Rubin开发，主要支持手机。2005年8月由Google收购注资。
                2007年11月，Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。随后Google以Apache开源许可证的授权方式，
                发布了Android的源代码。第一部Android智能手机发布于2008年10月。Android逐渐扩展到平板电脑及其他领域上，如电视、数码相机、游戏机等。2011年第一季度，
                Android在全球的市场份额首次超过塞班系统，跃居全球第一。 2013年的第四季度，Android平台手机的全球市场份额已经达到78.1%。[1]
                2013年09月24日谷歌开发的操作系统Android在迎来了5岁生日，全世界采用这款系统的设备数量已经达到10亿台。</p>
        </div>


        <div class="section">
            <h4 id="java">Java<small><a href="#" onclick="removeSection(this)">&times;删除该部分</a> </small></h4>
            <p>Java是一门面向对象编程语言，
                不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，
                因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，</p>
        </div>
    </div>
</div>
<span id="activeItem" style="color: red"></span>
<script type="text/javascript">
    $(function () {
       removeSection = function (e) {
           $(e).parents(".section").remove();
           $('[data-spy="scroll"]').each(function () {
               var $spy = $(this).scrollspy('refresh');
           })

       }
       $("#navbar-example").scrollspy();

        $('#navbar-example').on('activate.bs.scrollspy',function () {
            var currentItem = $(".navbar li.active > a").text();
            $("#activeItem").html("目前您正在查看 - "+currentItem);
        });
    });
</script>
</body>
</html>